<template>
  <footer  class="web-share_footer">
    <ul class="web-share_weChat">
      <li class="icon-weChat js-weChat"><img src="../common/images/Wechatcode.png" ></li>
      <li class="mes-weChat">长按二维码关注微鲸VR公众号</li>
    </ul>
    <a
      href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054"
      :class="['web-share_download', free ? 'charges' : 'normal']">
      购买合集 <span class="item-price">(¥{{price}})</span>
    </a>  
  </footer>  
</template>
<script>
  export default {
    props: {
      free: {
        type: Boolean,
        default: false
      },
      price: {
        type: String,
        default: '0'
      }
    }
  };
</script>
<style lang="scss" >
  @import "~common/style/topic";
  .web-share_footer {
    &.super-league{
      .web-share_weChat {
        margin-top: -.3rem;
        background: none !important;
      }
      .web-share_download {
        background-image: url('~common/images/APPbtn-zhongchao.png')!important;
      }
    }
    .web-share_weChat {
      @extend %flex;
      @include base-backgroundcolor(100%, 1);
      flex-direction:column;
      align-items:center;
      justify-content:center;
      margin-top: .3rem;
      margin-bottom: 1.8rem;
    }
    .icon-weChat {
      width: 100%;
      min-height: 3.75rem;
      height: -webkit-fit-content;
      height: fit-content;
      text-align: center;
      &>img {
        margin: .8rem auto 0;
        width: 50%;
        height: auto;
      }
    }
    .mes-weChat {
      @include font-color(82%);
      padding-top: .2rem;
      padding-bottom: .42rem;    
      font-size: .42rem;
      text-align: center;
    }
    .web-share_download {
      display: block;
      position: fixed;
      height: 1.35rem;
      line-height: 1.35rem;
      text-align: center;
      z-index: 9;
      bottom: 0;
      width: 100%;
      font-size: .42rem;
      &.charges {
        color: #fff;
        background-color: #ff3e3e; 
      }
      &.normal {
        min-height: 1.8rem;
        height: fit-content;
        background: url('~common/images/APPbtn.png') no-repeat left center;
        background-size: 100% auto;
        text-indent: -99rem;
      }
      .item-price {
        padding: 0 0 0 .1rem;
      }

    }    
  }
</style>
